import Icon from "@/components/Icon";
import styles from "./index.module.scss";
import classnames from "classnames";
import React from "react";
import { useHistory } from "react-router-dom";

// 1 针对组件接收的属性 类型定义
interface INavBar {
  //  类名
  className?: string;
  // 样式
  style?: React.CSSProperties;
  // 插槽
  children?: React.ReactNode;
  // 右侧内容
  right?: React.ReactNode;
  // 返回图标的点击事件
  onBack?: () => void;
  // 设置固定定位属性
  fixed?: boolean;
}

export default function NavBar({
  className,
  style,
  children,
  right,
  onBack,
  fixed,
}: INavBar) {
  // 返回上一页 useHistory
  const history = useHistory();
  return (
    <div className={styles.root}>
      <div className={classnames("main", className, { fixed })} style={style}>
        {/* 后退按钮 */}
        <div className="left">
          <Icon type="iconfanhui" onClick={onBack || history.goBack} />
        </div>
        {/* 居中标题 */}
        <div className="title">{children}</div>
        {/* 右侧内容 */}
        <div className="right">{right}</div>
      </div>
    </div>
  );
}
